<template>
    <div class="health-news-page">
      <!-- 页面标题 -->
      <div class="page-header">
        <h1 class="page-title">健康资讯</h1>
        <p class="page-subtitle">了解最新健康知识，关注身体健康</p>
      </div>
      
      <!-- 筛选区域 -->
      <div class="filter-container">
        <div class="search-box">
          <el-input
            v-model="searchQuery"
            placeholder="搜索健康文章..."
            prefix-icon="Search"
            @keyup.enter="filterArticles"
            class="search-input"
          ></el-input>
          <el-button type="primary" @click="filterArticles" class="search-btn">
            <el-icon><Search /></el-icon>
          </el-button>
        </div>
        
        <div class="category-filter">
          <span class="filter-label">分类:</span>
          <el-button-group>
            <el-button
              :class="{ 'active': activeCategory === 'all' }"
              @click="filterByCategory('all')"
            >
              全部
            </el-button>
            <el-button
              v-for="category in categories"
              :key="String(category.id)"
              :class="{ 'active': activeCategory === String(category.id) }"
              @click="filterByCategory(String(category.id))"
            >
              <i :class="category.icon"></i> {{ category.name }}
            </el-button>
          </el-button-group>
        </div>
      </div>
      
      <!-- 文章列表 -->
      <div class="articles-container">
        <div
          v-for="article in filteredArticles"
          :key="article.id"
          class="article-card"
        >
          <div class="article-img">
            <img :src="article.image" :alt="article.title" />
          </div>
          <div class="article-info">
            <div class="article-meta">
              <span class="article-category">{{ getCategoryName(article.categoryId) }}</span>
              <span class="article-date"><i class="el-icon-time"></i> {{ formatDate(article.date) }}</span>
              <span class="article-author"><i class="el-icon-user"></i> {{ article.author }}</span>
              <span class="article-views"><i class="el-icon-view"></i> {{ article.views }} 次阅读</span>
            </div>
            <h3 class="article-title">{{ article.title }}</h3>
            <div class="article-excerpt">{{ article.excerpt }}</div>
            <div class="article-footer">
              <el-button type="primary" @click="showArticleDetail(article)">
                阅读更多 <i class="el-icon-arrow-right"></i>
              </el-button>
            </div>
          </div>
        </div>
        
        <div v-if="filteredArticles.length === 0" class="no-articles">
          <el-empty description="没有找到相关文章">
            <template #image>
              <i class="el-icon-document-empty"></i>
            </template>
            <el-button type="default" @click="resetFilters" class="reset-btn">
              <i class="el-icon-refresh"></i> 重置筛选
            </el-button>
          </el-empty>
        </div>
      </div>
      
      <!-- 分页 -->
      <div v-if="filteredArticlesAllLength > 0" class="pagination">
        <el-pagination
          :current-page="currentPage"
          :page-sizes="[5, 10, 15]"
          :page-size="itemsPerPage"
          layout="prev, pager, next, jumper, ->, total, sizes"
          :total="filteredArticlesAllLength"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          background
          :pager-count="5"
          prev-text="上一页"
          next-text="下一页"
        >
        </el-pagination>
      </div>
      
      <!-- 文章详情模态框 -->
      <el-dialog
        v-model="showDetailModal"
        title="文章详情"
        width="70%"
        center
        @close="hideArticleDetail"
      >
        <template #content>
          <div class="modal-content">
            <div class="article-meta">
              <span class="article-date">
                <i class="el-icon-time"></i> {{ formatDate(currentArticle?.date || '') }}
              </span>
              <span class="article-category">
                <i class="el-icon-folder"></i> {{ getCategoryName(currentArticle?.categoryId || 0) }}
              </span>
              <span class="article-views">
                <i class="el-icon-view"></i> {{ currentArticle?.views || 0 }} 次阅读
              </span>
            </div>
            
            <div class="article-content" v-html="currentArticle?.content || ''"></div>
          </div>
        </template>
        <template #footer>
          <el-button @click="hideArticleDetail">
            <i class="el-icon-arrow-left"></i> 返回列表
          </el-button>
        </template>
      </el-dialog>
    </div>
  </template>
  
  <script lang="ts" setup>
  import { ref, computed, watch, onMounted, onUnmounted } from 'vue'
  import { ElMessage } from 'element-plus'
  import { Search } from '@element-plus/icons-vue'
  
  // 定义文章类型
  interface Article {
    id: number
    title: string
    excerpt: string
    content: string
    date: string
    categoryId: number
    image: string
    author: string
    views: number
  }
  
  // 定义分类类型
  interface Category {
    id: number
    name: string
    icon: string
  }
  
  // 模拟文章数据
  const articles: Article[] = [
    {
      id: 1,
      title: "如何通过饮食改善睡眠质量",
      excerpt: "睡眠质量对身体健康至关重要。本文将介绍通过饮食改善睡眠的方法和建议，帮助您获得更好的休息。",
      content: `
        <p>睡眠质量对身体健康至关重要。据统计，全球约有三分之一的人存在睡眠问题。长期睡眠不足会导致免疫力下降、记忆力减退、情绪波动等问题。</p>
        
        <h3>1. 避免睡前摄入咖啡因</h3>
        <p>咖啡因是一种中枢神经兴奋剂，会抑制褪黑素的分泌，从而影响睡眠。咖啡、茶、巧克力等食物中都含有咖啡因，建议睡前4-6小时避免摄入。</p>
        
        <h3>2. 增加富含色氨酸的食物摄入</h3>
        <p>色氨酸是合成褪黑素的重要原料。牛奶、香蕉、燕麦、杏仁等食物中富含色氨酸，可以帮助提高褪黑素水平，改善睡眠。</p>
        
        <h3>3. 适量摄入镁元素</h3>
        <p>镁元素可以帮助放松肌肉和神经，缓解焦虑和压力，从而促进睡眠。菠菜、南瓜籽、黑巧克力等食物中富含镁元素。</p>
        
        <h3>4. 避免晚餐过饱或过饿</h3>
        <p>晚餐过饱会导致消化不良，影响睡眠；而晚餐过饿会导致血糖过低，使人感到饥饿和不安，也会影响睡眠。建议晚餐吃到七八分饱即可。</p>
        
        <h3>5. 建立规律的饮食习惯</h3>
        <p>保持规律的饮食习惯有助于调节生物钟，提高睡眠质量。建议每天固定时间吃饭，避免熬夜和夜宵。</p>
        
        <p>通过合理的饮食调整，可以有效改善睡眠质量。如果您长期存在睡眠问题，建议咨询医生或营养师的意见。</p>
      `,
      date: "2023-10-15",
      categoryId: 1,
      image: "https://picsum.photos/600/400?random=1",
      author: "李医生",
      views: 1254
    },
    {
      id: 2,
      title: "常见慢性病的预防与管理",
      excerpt: "慢性病是当今社会的主要健康问题之一。本文将介绍高血压、糖尿病、心脏病等常见慢性病的预防措施和管理方法。",
      content: `
        <p>慢性病是指长期存在的疾病，如高血压、糖尿病、心脏病、癌症等。随着生活方式的改变和人口老龄化的加剧，慢性病已成为全球主要的健康问题之一。</p>
        
        <h3>1. 高血压</h3>
        <p>高血压是一种常见的慢性病，如果不及时治疗，会导致心脏病、中风、肾脏疾病等严重后果。预防高血压的方法包括：</p>
        <ul>
          <li>保持健康的体重</li>
          <li>减少钠盐摄入</li>
          <li>增加钾盐摄入</li>
          <li>适量运动</li>
          <li>戒烟限酒</li>
          <li>控制压力</li>
        </ul>
        
        <h3>2. 糖尿病</h3>
        <p>糖尿病是一种由于胰岛素分泌不足或作用缺陷导致的代谢性疾病。预防糖尿病的方法包括：</p>
        <ul>
          <li>保持健康的体重</li>
          <li>均衡饮食，减少高糖、高脂肪食物摄入</li>
          <li>适量运动</li>
          <li>定期体检，检测血糖</li>
          <li>控制血压和血脂</li>
        </ul>
        
        <h3>3. 心脏病</h3>
        <p>心脏病是一类严重的心血管疾病，包括冠心病、心肌梗死、心力衰竭等。预防心脏病的方法包括：</p>
        <ul>
          <li>保持健康的体重</li>
          <li>均衡饮食，减少饱和脂肪和胆固醇摄入</li>
          <li>适量运动</li>
          <li>戒烟限酒</li>
          <li>控制血压、血糖和血脂</li>
          <li>定期体检</li>
        </ul>
        
        <p>对于已经患有慢性病的患者，除了遵循医生的治疗方案外，还应注意生活方式的调整，如合理饮食、适量运动、戒烟限酒等。定期复查和自我监测也是管理慢性病的重要环节。</p>
      `,
      date: "2023-10-10",
      categoryId: 2,
      image: "https://picsum.photos/600/400?random=2",
      author: "王医生",
      views: 987
    },
    {
      id: 3,
      title: "儿童常见疾病的家庭护理",
      excerpt: "儿童免疫系统尚未完全发育，容易患上感冒、发烧、咳嗽等常见疾病。本文将介绍这些疾病的家庭护理方法和注意事项。",
      content: `
        <p>儿童免疫系统尚未完全发育，容易患上感冒、发烧、咳嗽等常见疾病。正确的家庭护理可以帮助孩子缓解症状，促进康复。</p>
        
        <h3>1. 感冒</h3>
        <p>感冒是儿童最常见的疾病之一，主要症状包括流鼻涕、打喷嚏、喉咙痛等。家庭护理方法包括：</p>
        <ul>
          <li>让孩子多休息，保证充足的睡眠</li>
          <li>多喝水，保持身体水分</li>
          <li>使用生理盐水滴鼻，缓解鼻塞</li>
          <li>保持室内空气湿润，可以使用加湿器</li>
          <li>饮食清淡，易消化</li>
        </ul>
        
        <h3>2. 发烧</h3>
        <p>发烧是身体对抗感染的一种自然反应。家庭护理方法包括：</p>
        <ul>
          <li>监测体温，记录变化</li>
          <li>让孩子多喝水，防止脱水</li>
          <li>穿着轻薄、透气的衣物</li>
          <li>使用物理降温方法，如湿毛巾敷额头</li>
          <li>按照医生的建议使用退烧药</li>
        </ul>
        
        <h3>3. 咳嗽</h3>
        <p>咳嗽是一种保护性反射，帮助清除呼吸道分泌物。家庭护理方法包括：</p>
        <ul>
          <li>让孩子多喝水，保持呼吸道湿润</li>
          <li>使用加湿器，增加空气湿度</li>
          <li>避免让孩子接触刺激性物质，如烟雾、灰尘等</li>
          <li>按照医生的建议使用止咳药</li>
        </ul>
        
        <p>需要注意的是，如果孩子的症状持续加重或出现呼吸困难、高热不退、精神萎靡等严重症状，应及时就医。</p>
      `,
      date: "2023-10-05",
      categoryId: 3,
      image: "https://picsum.photos/600/400?random=3",
      author: "张医生",
      views: 1123
    },
    {
      id: 4,
      title: "心理健康：如何应对压力和焦虑",
      excerpt: "现代生活节奏快，压力大，很多人都面临着压力和焦虑的问题。本文将介绍一些有效的应对方法，帮助您保持心理健康。",
      content: `
        <p>现代生活节奏快，压力大，很多人都面临着压力和焦虑的问题。长期的压力和焦虑会影响身体健康，导致失眠、抑郁、免疫力下降等问题。</p>
        
        <h3>1. 认识压力和焦虑</h3>
        <p>压力和焦虑是人体对威胁或挑战的自然反应。适度的压力可以激发我们的潜能，但过度的压力和焦虑则会对身体和心理造成负面影响。</p>
        
        <h3>2. 应对压力的方法</h3>
        <p>以下是一些有效的应对压力的方法：</p>
        <ul>
          <li>调整心态，学会接受不可控的事情</li>
          <li>合理安排时间，避免过度劳累</li>
          <li>进行适量的运动，如散步、跑步、瑜伽等</li>
          <li>培养兴趣爱好，放松身心</li>
          <li>与家人、朋友交流，分享感受</li>
          <li>学会放松技巧，如深呼吸、冥想等</li>
        </ul>
        
        <h3>3. 应对焦虑的方法</h3>
        <p>以下是一些有效的应对焦虑的方法：</p>
        <ul>
          <li>识别焦虑的触发因素，并尝试避免或减少接触</li>
          <li>进行认知重构，改变负面思维模式</li>
          <li>进行身体放松练习，如渐进性肌肉松弛</li>
          <li>保持规律的生活作息，保证充足的睡眠</li>
          <li>寻求专业帮助，如心理咨询或治疗</li>
        </ul>
        
        <p>心理健康同样重要，我们应该关注自己的心理状态，及时采取措施应对压力和焦虑。如果您长期感到情绪低落、焦虑或有其他心理问题，建议寻求专业心理健康专家的帮助。</p>
      `,
      date: "2023-09-28",
      categoryId: 4,
      image: "https://picsum.photos/600/400?random=4",
      author: "刘医生",
      views: 876
    },
    {
      id: 5,
      title: "老年人健康养生指南",
      excerpt: "随着年龄的增长，老年人的身体机能逐渐下降，需要更加注意健康养生。本文将为老年人提供一些实用的健康养生建议。",
      content: `
        <p>随着年龄的增长，老年人的身体机能逐渐下降，容易患上各种慢性疾病。科学的健康养生可以帮助老年人保持身体健康，提高生活质量。</p>
        
        <h3>1. 饮食养生</h3>
        <p>老年人的饮食应遵循以下原则：</p>
        <ul>
          <li>均衡饮食，保证摄入足够的蛋白质、维生素和矿物质</li>
          <li>多吃蔬菜水果，增加膳食纤维摄入</li>
          <li>减少钠盐摄入，避免高血压</li>
          <li>适量摄入不饱和脂肪酸，如鱼油、坚果等</li>
          <li>饮食清淡，易消化</li>
          <li>少食多餐，避免暴饮暴食</li>
        </ul>
        
        <h3>2. 运动养生</h3>
        <p>适量的运动对老年人的健康非常重要：</p>
        <ul>
          <li>选择适合自己的运动方式，如散步、太极拳、广场舞等</li>
          <li>每周至少进行150分钟的中等强度有氧运动</li>
          <li>适当进行力量训练，如举重、俯卧撑等，增强肌肉力量</li>
          <li>运动前进行热身，运动后进行放松</li>
          <li>根据自己的身体状况调整运动强度和时间</li>
        </ul>
        
        <h3>3. 心理养生</h3>
        <p>保持良好的心理状态对老年人的健康同样重要：</p>
        <ul>
          <li>保持积极乐观的心态，学会应对生活中的压力和挑战</li>
          <li>培养兴趣爱好，丰富晚年生活</li>
          <li>与家人、朋友保持良好的沟通和交流</li>
          <li>参加社交活动，扩大社交圈子</li>
          <li>必要时寻求心理咨询或治疗</li>
        </ul>
        
        <p>老年人还应定期进行体检，及时发现和治疗潜在的健康问题。同时，要遵循医生的建议，按时服药，保持良好的生活习惯。</p>
      `,
      date: "2023-09-20",
      categoryId: 5,
      image: "https://picsum.photos/600/400?random=5",
      author: "陈医生",
      views: 754
    },
    {
      id: 6,
      title: "孕期保健：准妈妈必知的健康知识",
      excerpt: "孕期是女性生命中的特殊时期，需要特别注意保健和营养。本文将为准妈妈提供一些实用的孕期保健知识和建议。",
      content: `
        <p>孕期是女性生命中的特殊时期，需要特别注意保健和营养。正确的孕期保健可以帮助准妈妈和胎儿保持健康，顺利度过孕期。</p>
        
        <h3>1. 孕期营养</h3>
        <p>孕期营养对胎儿的发育至关重要。准妈妈应注意以下几点：</p>
        <ul>
          <li>增加蛋白质摄入，如瘦肉、鱼类、蛋类、豆类等</li>
          <li>补充叶酸，预防胎儿神经管缺陷</li>
          <li>增加钙摄入，预防孕妇骨质疏松</li>
          <li>适量摄入铁，预防贫血</li>
          <li>多吃蔬菜水果，保证维生素和矿物质摄入</li>
          <li>避免食用生冷食物、加工食品和高糖食品</li>
        </ul>
        
        <h3>2. 孕期运动</h3>
        <p>适量的运动对孕妇和胎儿都有益处：</p>
        <ul>
          <li>选择适合孕妇的运动方式，如孕妇瑜伽、散步、游泳等</li>
          <li>避免剧烈运动和高风险运动</li>
          <li>运动前咨询医生的意见</li>
          <li>运动时注意安全，避免摔倒</li>
          <li>运动后适当休息，补充水分</li>
        </ul>
        
        <h3>3. 孕期检查</h3>
        <p>定期进行孕期检查可以及时发现和处理潜在的健康问题：</p>
        <ul>
          <li>按照医生的建议定期进行产前检查</li>
          <li>进行必要的筛查和诊断测试，如唐氏筛查、B超等</li>
          <li>及时向医生报告任何不适或异常症状</li>
          <li>遵循医生的建议，按时服药和治疗</li>
        </ul>
        
        <p>孕期还应注意休息，保持良好的心态，避免过度劳累和压力。准妈妈可以参加孕妇学校，学习更多的孕期保健知识和育儿技巧。</p>
      `,
      date: "2023-09-15",
      categoryId: 6,
      image: "https://picsum.photos/600/400?random=6",
      author: "林医生",
      views: 1023
    }
  ]
  
  // 模拟分类数据
  const categories: Category[] = [
    { id: 1, name: "饮食健康", icon: "el-icon-utensils" },
    { id: 2, name: "疾病预防", icon: "el-icon-heart" },
    { id: 3, name: "儿童健康", icon: "el-icon-child" },
    { id: 4, name: "心理健康", icon: "el-icon-mind" },
    { id: 5, name: "老年健康", icon: "el-icon-user" },
    { id: 6, name: "孕期保健", icon: "el-icon-mother" }
  ]
  
  // 状态管理
  const searchQuery = ref('')
  const activeCategory = ref('all')
  const currentPage = ref(1)
  const itemsPerPage = ref(5)
  const showDetailModal = ref(false)
  const currentArticle = ref<Article | null>(null)
  
  // 计算属性
  const filteredArticlesAll = computed(() => {
    let result = [...articles]
    // 按分类筛选
    if (activeCategory.value !== 'all') {
      const categoryId = parseInt(activeCategory.value)
      result = result.filter(article => article.categoryId === categoryId)
    }
    // 按搜索关键词筛选
    if (searchQuery.value) {
      const query = searchQuery.value.toLowerCase()
      result = result.filter(article => 
        article.title.toLowerCase().includes(query) || 
        article.excerpt.toLowerCase().includes(query) ||
        article.content.toLowerCase().includes(query)
      )
    }
    return result
  })
  
  const filteredArticlesAllLength = computed(() => filteredArticlesAll.value.length)
  
  const filteredArticles = computed(() => {
    const start = (currentPage.value - 1) * itemsPerPage.value
    const end = start + itemsPerPage.value
    return filteredArticlesAll.value.slice(start, end)
  })
  
  // 方法
  const filterByCategory = (categoryId: string) => {
    activeCategory.value = categoryId
    currentPage.value = 1
  }
  
  const filterArticles = () => {
    currentPage.value = 1
  }
  
  const resetFilters = () => {
    searchQuery.value = ''
    activeCategory.value = 'all'
    currentPage.value = 1
    ElMessage({
      message: '筛选条件已重置',
      type: 'success',
    })
  }
  
  const handleSizeChange = (newSize: number) => {
    itemsPerPage.value = newSize
    currentPage.value = 1
  }
  
  const handleCurrentChange = (newPage: number) => {
    currentPage.value = newPage
  }
  
  const showArticleDetail = (article: Article) => {
    currentArticle.value = article
    showDetailModal.value = true
    // 增加文章阅读量
    const index = articles.findIndex(a => a.id === article.id)
    if (index !== -1) {
      articles[index].views++
    }
  }
  
  const hideArticleDetail = () => {
    showDetailModal.value = false
  }
  
  const formatDate = (dateString: string) => {
    const date = new Date(dateString)
    return date.toLocaleDateString('zh-CN', { 
      year: 'numeric', 
      month: 'long', 
      day: 'numeric' 
    })
  }
  
  const getCategoryName = (categoryId: number) => {
    const category = categories.find(c => c.id === categoryId)
    return category ? category.name : '未分类'
  }
  
  const getCategoryClass = (categoryId: number) => {
    const classes = [
      'bg-green-100 text-green-800',
      'bg-blue-100 text-blue-800',
      'bg-purple-100 text-purple-800',
      'bg-pink-100 text-pink-800',
      'bg-amber-100 text-amber-800',
      'bg-teal-100 text-teal-800'
    ]
    return classes[categoryId - 1] || 'bg-gray-100 text-gray-800'
  }
  </script>
  
  <style scoped lang="scss">
  .health-news-page {
    padding: 40px 0;
    max-width: 1100px;
    margin: 0 auto;
    background: #f6fafd;
    min-height: 100vh;
  }
  
  .page-header {
    text-align: center;
    margin-bottom: 40px;
    .page-title {
      font-family: "Poppins", "PingFang SC", "Microsoft YaHei", sans-serif;
      font-size: 2.7rem;
      color: #1976d2;
      font-weight: 700;
      margin-bottom: 10px;
      letter-spacing: 2px;
    }
    .page-subtitle {
      font-size: 1.15rem;
      color: #5c6b7a;
      margin: 0 auto;
      max-width: 600px;
      letter-spacing: 1px;
    }
  }
  
  .filter-container {
    background: #fff;
    border-radius: 18px;
    padding: 28px 32px 18px 32px;
    box-shadow: 0 6px 24px rgba(25, 118, 210, 0.07);
    margin-bottom: 38px;
    display: flex;
    flex-direction: column;
    gap: 18px;
  }
  
  .search-box {
    display: flex;
    align-items: center;
    gap: 16px;
    .search-input {
      flex: 1;
    }
    .search-btn {
      min-width: 90px;
      font-weight: 600;
      font-size: 1rem;
    }
  }
  
  .category-filter {
    display: flex;
    align-items: center;
    gap: 18px;
    .filter-label {
      font-weight: 600;
      color: #1976d2;
      font-size: 1rem;
    }
    .el-button-group {
      .el-button {
        border-radius: 20px !important;
        font-weight: 500;
        font-size: 0.98rem;
        margin-right: 6px;
        background: #f3f7fa;
        color: #1976d2;
        border: none;
        transition: all 0.2s;
        i {
          margin-right: 4px;
        }
        &.active, &:hover, &:focus {
          background: linear-gradient(90deg, #42a5f5 0%, #1976d2 100%);
          color: #fff;
          box-shadow: 0 2px 8px rgba(33,150,243,0.10);
        }
      }
    }
  }
  
  .articles-container {
    display: flex;
    flex-direction: column;
    gap: 28px;
    margin-bottom: 40px;
  }
  
  .article-card {
    display: flex;
    align-items: center;
    background: #fff;
    border-radius: 18px;
    box-shadow: 0 4px 18px rgba(25, 118, 210, 0.07);
    overflow: hidden;
    transition: box-shadow 0.2s, transform 0.2s;
    &:hover {
      box-shadow: 0 10px 32px rgba(25, 118, 210, 0.13);
      transform: translateY(-4px) scale(1.01);
    }
    .article-img {
      width: 220px;
      height: 100%;
      flex-shrink: 0;
      display: flex;
      align-items: center;
      justify-content: center;
      overflow: hidden;
      background: #f6fafd;
      img {
        width: 100%;
        height: 100%;
        min-height: 160px;
        max-height: 300px;
        object-fit: cover;
        display: block;
      }
    }
    .article-info {
      flex: 1;
      padding: 22px 28px 18px 28px;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
    }
    .article-meta {
      display: flex;
      flex-wrap: wrap;
      gap: 18px;
      font-size: 0.95rem;
      color: #6c757d;
      margin-bottom: 8px;
      .article-category {
        background: #e3f2fd;
        color: #1976d2;
        border-radius: 8px;
        padding: 2px 12px;
        font-size: 0.95rem;
        font-weight: 500;
      }
    }
    .article-title {
      font-size: 1.25rem;
      font-weight: 700;
      color: #222;
      margin: 8px 0 10px 0;
      font-family: 'Poppins', 'PingFang SC', 'Microsoft YaHei', sans-serif;
      letter-spacing: 1px;
    }
    .article-excerpt {
      color: #495057;
      margin-bottom: 12px;
      line-height: 1.7;
      font-size: 1.05rem;
    }
    .article-footer {
      display: flex;
      justify-content: flex-end;
      .el-button {
        border-radius: 20px;
        font-weight: 600;
        font-size: 1rem;
        padding: 8px 22px;
      }
    }
  }
  
  .no-articles {
    padding: 60px 0;
    text-align: center;
  }
  
  .reset-btn {
    margin-top: 20px;
  }
  
  .pagination {
    margin-top: 40px;
    display: flex;
    justify-content: center;
    .el-pagination {
      font-size: 1.08rem;
      .el-pagination__total, .el-pagination__jump, .el-pagination__sizes {
        color: #1976d2;
        font-weight: 500;
      }
      .el-pagination__jump input {
        border-radius: 8px;
        border: 1px solid #e3f2fd;
        padding: 2px 8px;
      }
      .el-pagination__sizes .el-select .el-input__inner {
        border-radius: 8px;
        border: 1px solid #e3f2fd;
      }
      .el-pager li {
        border-radius: 8px;
        font-weight: 600;
        &.is-active {
          background: linear-gradient(90deg, #42a5f5 0%, #1976d2 100%);
          color: #fff;
        }
      }
    }
  }
  
  .modal-content {
    line-height: 1.8;
    color: #212529;
    .article-meta {
      display: flex;
      gap: 18px;
      margin-bottom: 18px;
      color: #1976d2;
      font-size: 1rem;
      .article-category {
        background: #e3f2fd;
        color: #1976d2;
        border-radius: 8px;
        padding: 2px 12px;
        font-size: 0.95rem;
        font-weight: 500;
      }
    }
    .article-content {
      margin-top: 10px;
      font-size: 1.08rem;
      line-height: 1.9;
      color: #333;
    }
  }
  
  .back-to-top {
    z-index: 1000;
  }
  
  /* 响应式 */
  @media (max-width: 900px) {
    .health-news-page {
      padding: 18px 0;
    }
    .article-card {
      flex-direction: column;
      .article-img {
        width: 100%;
        height: 180px;
      }
      .article-info {
        padding: 18px 16px 14px 16px;
      }
    }
  }
  
  @media (max-width: 600px) {
    .filter-container {
      padding: 12px 6px 8px 6px;
    }
    .article-card {
      .article-info {
        padding: 12px 6px 10px 6px;
      }
    }
    .page-header .page-title {
      font-size: 1.5rem;
    }
  }
  </style>
  